﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajax二级联动.aspx.cs" Inherits="ProjectStudy.ajax二级联动" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $.ajax({
                type: "POST",
                url: "../Ajax/二级联动.ashx",
                datatype: "json",
                data: { action: "GetPro" },
                success: function (data) {
                    if (data != "") {
                        var datalist = eval(data);
                        var alloption = "";
                        for (var i = 0; i < datalist.length; i++) {
                            var province = datalist[i]["ProvinceName"];
                            var option = "<option value='" + province + "'>" + province + "</option>";
                            alloption = alloption + option;
                        }
                        $("#<%=ddl1. ClientID %>").html(alloption);

                        var sel = $("#<%= ddl1.ClientID %> option:selected").text();
                        bindCity(sel);
                    }
                }
            });

            $("#<%=ddl1. ClientID %>").change(function () {
                var sel = $("#<%= ddl1.ClientID %> option:selected").text();
                bindCity(sel);
            });
        });

        function bindCity(sel) {
            $.ajax({
                type: "POST",
                url: "../Ajax/二级联动.ashx",
                datatype: "json",
                data: { action: "GetCity", ProvinceName: sel },
                success: function (data) {
                    //alert("成功");

                    if (data != "") {
                        var datalist = eval(data);
                        
                        var alloption = "";
                        for (var i = 0; i < datalist.length; i++) {
                            var city = datalist[i]["CityName"];
                            
                            var option = "<option value='" + city + "'>" + city + "</option>";
                            alloption = alloption + option;
                        }
                        $("#" + '<%=ddl2. ClientID %>').html(alloption);
                    }
                }
            });
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddl1" runat="server"></asp:DropDownList>
        <br />
        <br />
        <asp:DropDownList ID="ddl2" runat="server"></asp:DropDownList>
    </div>
    </form>
</body>
</html>
